import React, { useState } from 'react'
import { Modal, Button, message } from 'antd';
import './index.css'
import dh from '../../../static/img/paysuc/dh.png';
import zfb from '../../../static/img/paysuc/zfb.png';
import wx from '../../../static/img/paysuc/wx.png';
import yl from '../../../static/img/paysuc/yl.png';
import ye from '../../../static/img/paysuc/ye.png';
import dn from '../../../static/img/paysuc/dn.png';
import zewm from '../../../static/img/paysuc/zewm.png';
import sj from '../../../static/img/paysuc/sj.png';
import wewm from '../../../static/img/paysuc/wewm.png';
import {useNavigate,useLocation} from 'react-router-dom';
import axios from 'axios';
import { aUrl } from '../../../static/axios_url';
export default function PaySuc() {
    let navigate = useNavigate();
    //接收
    let loca = useLocation()
    // console.log(loca.state);
    // 提交订单
    const [isModal, setModal] = useState(false);
    const qyModal = () => {
        axios.post(aUrl+'/shopcar/pay',{
            pay:loca.state
        }).then(res=>{
            if(res.data.code===1){
                message.success('支付成功')
                setModal(true);
            }else{
                message.error('账户余额不足，请充值')
            }
        })
        
    };
    const qyOk = () => {
        setModal(false);
    };
    const qyCancel = () => {
        setModal(false);
        navigate('/shop/payyes')
    };
    return (
        <div className='pay-head'>
            <ul>
                <li><img src={dh} alt="" /></li>
                <li>订单已提交，请与24小时内完成支付<span>(逾期订单将被取消)</span></li>
                <li> <i className='fa fa-location-arrow' /> 送货至：<span>张三 北京市 海定区 左拐第二个胡同 手机155588899</span></li>
                <li>应付金额：<span>{loca.state}</span> (在线支付)</li>
                <li>支付平台</li>
            </ul>
            <div className='pay-zffs'>
                <span><input type="radio" name='a' /><img src={zfb} alt="" /></span>
                <span><input type="radio" name='a' /><img src={wx} alt="" /></span>
                <span><input type="radio" name='a' /><img src={yl} alt="" /></span>
                <span><input type="radio" name='a' /><img src={ye} alt="" /></span>
            </div>
            <div className='pay-comp'>
                <ul>
                    <li>
                        <h3>使用电脑支付</h3>
                        <div><img src={dn} alt="" /></div>
                        <Button style={{ width: 170, height: 45, margin: '40px 0 0 0', backgroundColor: '#F08200', border: 'none', borderRadius: 5,  color: '#FFFFFF', cursor: 'pointer' }} type="primary" onClick={qyModal}>
                        确认付款
                    </Button>
                    </li>
                    <li>
                        <h3>使用支付宝钱包扫一扫付款</h3>
                        <div><img src={zewm} alt="" /></div>
                    </li>
                </ul>
            </div>
            <div className='pay-comp'>
                <ul>
                    <li>
                        <div style={{ marginTop: -30, marginRight: 70 }}><img src={sj} alt="" /></div>
                    </li>
                    <li>
                        <h3>使用微信钱包扫一扫付款</h3>
                        <div><img src={wewm} alt="" /></div>
                    </li>
                </ul>
            </div>

            <>
                {/* 提交订单模态框 */}
                <Modal visible={isModal} width={687} height={433}
                    footer={[
                        <Button style={{ width: 170, height: 71, backgroundColor: '#498E3D', border: 'none', borderRadius: 5, font: '18px/30px ""', color: '#FFFFFF', cursor: 'pointer', marginRight: 100 }} key="back" onClick={qyCancel}>
                            已经完成支付
                            <p style={{fontSize:14}}>查看订单详情</p>
                        </Button>,
                        <Button style={{ width: 170, height: 71, backgroundColor: '#F08200', border: 'none', borderRadius: 5, font: '18px/30px ""', color: '#FFFFFF', cursor: 'pointer', marginRight: 100 }} key="submit" type="primary" onClick={qyOk}>
                            支付失败
                            <p style={{fontSize:14}}>更换支付方式</p>
                        </Button>,
                    ]}
                >
                    <div className='om-tsk' style={{ position: 'relative', height: 300 }}>
                        <p style={{width:'100%',height:180,font:'26px/180px "',textAlign:'center',color:'#f08200'}}>使用平台支付</p>
                        <p style={{width:'100%',height:80,fontSize:16,textAlign:'center',color:'#666666'}}>请您在新打开的网上银行页面进行支付，支付完成前请不要关闭该窗口</p>
                    </div>
                </Modal>
            </>
        </div>
    )
}
